<template>
	<view class="all">
		<view class="body_1">
			<view class="body_1_">
				选择支付方式
			</view>
			<view class="xian"></view>
			<view class="body_1_2">

				<view :class="{
					body_1_2_1:true,
					body_1_2_13:cust==1?false:true,
					body_1_2_12:cust==1?true:false,
				}" @click="cust=1">
					<image style="width: 50rpx;height: 50rpx;" src="https://s4.ax1x.com/2022/01/19/7DzGxP.png" />
					<text>支付宝支付</text>
				</view>
				<view :class="{
					body_1_2_2:true,
					body_1_2_12:cust==2?true:false,
				}" @click="cust=2">

					<image style="width: 50rpx;height: 50rpx;" src="https://s4.ax1x.com/2022/01/19/7Dz4i9.png" />
					<text>微信支付</text>

				</view>
			</view>
		</view>
		<view class="cen"></view>
		<view class="cen1">
			<view class="">
				<image style="width: 30rpx;height: 30rpx;" src="https://s4.ax1x.com/2022/01/19/7rS3o4.png" />
				<text>支付金额</text>
			</view>
			<text>¥{{money}}</text>
		</view>
		<view class="" style="position: absolute;width: 100%;
		bottom: 20rpx;">
			<view class="foot">
			<!-- 	<view class="foot_1">
					<image @click="yue" style="width: 30rpx;height: 30rpx;" :src="index?$src:$src1 " />
					<text style="margin-left: 10rpx;">我已阅读购课须知</text>
				</view> -->
				<view class="foot_2">
					<image @click="_play" style="width: 300rpx;height: 88rpx;"
						src="https://s4.ax1x.com/2022/01/19/7rSTYj.png" />
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: false,
				src: 'https://s4.ax1x.com/2022/01/19/7rS3o4.png',

				cust: 1,
				money: '',
				type: '',
			};
		},
		onLoad(option) {
			this.money = option.money
			this.type = option.type ? option.type : ''
			this.id=option.id?option.id:''
		},
		methods: {
			yue() {
				if (this.index) {
					this.index = false
				} else {
					this.index = true
				}
			},
			_play() {
				if (this.id) {
					uni.navigateTo({
						url: '/pages/play/shoppingPlaysuccess'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/play/playsuccess?type=${this.type}`
				});
				// if (this.index||) {
				
				// } else {
				// 	this.$toast('请先同意条款', 0)
				// }

			},
		}
	}
</script>

<style lang="scss">
	.body_1_2_13 {
		border: 1px solid rgb(244, 244, 244);
	}

	.body_1_2_12 {
		border: 1px solid #FF2424;
	}

	.foot {
		text-align: center;
		bottom: 50rpx;
		bottom: 50rpx;

		.foot_2 {
			margin-top: 40rpx;
		}

		.foot_1 {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.cen1 {
		display: flex;
		align-items: center;
		border: 1px solid #FF2424;
		width: 85%;
		margin: auto;
		height: 83rpx;
		border-radius: 8rpx;
		margin-top: 40rpx;
		justify-content: space-around;

		view {
			display: flex;
			align-items: center;

			text:nth-of-type(1) {
				margin-left: 10rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 600;
				color: #131314;
				opacity: 1;
			}
		}

		text:nth-of-type(1) {
			font-size: 36rpx;
			font-family: HarmonyOS Sans;
			font-weight: 600;
			line-height: 33px;
			color: #FF2424;
			opacity: 1;
		}
	}

	.cen {
		margin-top: 20rpx;
		height: 20rpx;
		background-color: #F8F8FA;
	}

	.body_1 {
		padding: 20rpx;

		.body_1_2 {
			display: flex;
			margin-top: 30rpx;
			justify-content: space-around;

			.body_1_2_1 {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 291rpx;
				height: 146rpx;
				border-radius: 8rpx;

				text {
					margin-left: 20rpx;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #131314;
					opacity: 1;
				}
			}

			.body_1_2_2 {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 291rpx;
				height: 146rpx;
				background-color: #F5F5F5;
				border-radius: 8rpx;

				text {
					margin-left: 20rpx;
				}
			}

		}

		.xian {
			margin-top: 30rpx;
			border: 1rpx solid #E3E3E3;
			opacity: 1;
		}

		.body_1_ {
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			color: #91969A;
			opacity: 1;
		}
	}
</style>
